<template>
  <div class="data-analysis">
    <div class="data-analysis-left">
      <div
        v-for="(item, index) in authList"
        :key="index"
        class="data-analysis-cell"
        :class="{ 'is-active': item.value === type }"
        @click="onChangeType(item.value)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="data-analysis-right">
       <component :is="component" />
       <ElEmpty v-if="!authList.length" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import dayPage from '../day-page'
import performancePage from '../performance-page'
import receptionPage from '../reception-page'
import customerReceptionPage from '../customer-reception-page'
import checkPage from '../check-page'
import salesPage from '../sales-page'
import inputPage from '../input-page'
import { useAuth } from '@/utils/auth'
const auth = useAuth()

const list = [
  { label: '店铺每日绩效', value: 1, auth: 'dayPage' },
  { label: '店铺整体绩效', value: 2, auth: 'performancePage' },
  { label: '接待量预警', value: 3, auth: 'receptionPage' },
  { label: '客服接待汇总表', value: 4, auth: 'customerReceptionPage' },
  { label: '客服考核汇总表', value: 5, auth: 'checkPage' },
  { label: '销售额统计表', value: 6, auth: 'salesPage' },
  { label: '录入量统计表', value: 7, auth: 'inputPage' },
]
const authList = computed(() => {
  return list.filter(item => auth.value.has(item.auth))
})
const components = {
  1: dayPage.getComponent(),
  2: performancePage.getComponent(),
  3: receptionPage.getComponent(),
  4: customerReceptionPage.getComponent(),
  5: checkPage.getComponent(),
  6: salesPage.getComponent(),
  7: inputPage.getComponent()
}

const defaultType = authList.value[0]

const type = ref(defaultType && defaultType.value)
const component = computed(() => components[type.value])
const onChangeType = val => {
  type.value = val
}
</script>

<style scoped lang="scss">
.data-analysis {
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  padding-left: 12px;
  &-right {
    width: calc(100% - 212px);
    flex-grow: 0;
    flex-shrink: 0;
  }
  &-left {
    box-sizing: border-box;
    width: 200px;
    border: 1px solid #F0F0F0;
    border-radius: 4px;
    flex-shrink: 0;
    margin: 12px 0;
  }

  &-cell {
    box-sizing: border-box;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-family: PingFangHK-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    cursor: pointer;

    &.is-active {
      background: #094DB2;
      color: #fff;
    }
  }

  &-cell + &-cell {
    border-top: 1px solid #F0F0F0;
  }
}
</style>
